<template>
  <div style="margin-top: 10px">
    <div style="width: 100%;text-align: center">
      <span style="margin-right: 100px;font-size: 20px">结题情况</span>
      <el-date-picker
          v-model="selectYears"
          type="yearrange"
          range-separator="To"
          start-placeholder="Start Year"
          end-placeholder="End Year"
      /><el-button @click="handleQuery" :icon="Search" circle />
    </div>

    <v-chart v-on:click="handleClick" ref="chart" class="chart" style="height: 350px" :option="optionBar" autoresize />
    <el-dialog v-model="openDia" width="80%" center>
      <el-tabs v-model="activeFinish" @tab-click="handleFinishClick">
        <el-tab-pane label="未结题" name="first"></el-tab-pane>
        <el-tab-pane label="已结题" name="second"></el-tab-pane>
      </el-tabs>
      <el-table v-loading="loading" :data="jtList">
        <el-table-column label="超期提醒" align="center" width="90">
          <template #default="scope">
            <div v-if="scope.row.f1>0" style="margin-left: 15px;width:20px;height:20px;border-radius:50%;background-color:red;"></div>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" align="center" width="200" prop="code"/>
        <el-table-column label="项目名称" align="center" prop="projectName" width="220"/>
        <el-table-column label="项目负责人" align="center" prop="projectLeader" width="220"/>
        <el-table-column label="项目截止日期" align="center" prop="finishDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.finishDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实验详情信息" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="toExperiment(scope.row.projectId)">详情</el-button>
          </template>
        </el-table-column>

      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParam.pageNum"
          v-model:limit="queryParam.pageSize"
          @pagination="getList"
      />
    </el-dialog>
    <el-dialog v-model="openDia2"  append-to-body style="width: 800px; border-radius: 20px;">
      <el-table :data="jt2List">
        <el-table-column prop="sampleName" label="样品编号" align="center"></el-table-column>
        <el-table-column prop="type" label="实验名称" align="center"></el-table-column>
        <el-table-column prop="experimentNumber" label="实验数量" align="center"></el-table-column>
        <el-table-column prop="experimentRemark" label="实验备注" align="center"/>
        <el-table-column prop="experimentRemark" label="完成日期进度" align="center">
          <template #default="scope">
            <div v-if="scope.row.experimentDate!=null && scope.row.experimentRequiredDate!=null">
              <span style="color: red" v-if="getJD(scope.row.experimentDate,scope.row.experimentRequiredDate)>=100">
                100%
              </span>
              <span style="color: red" v-else-if="getJD(scope.row.experimentDate,scope.row.experimentRequiredDate)>50">
                {{getJD(scope.row.experimentDate,scope.row.experimentRequiredDate)}}%
              </span>
              <span v-else>
                {{getJD(scope.row.experimentDate,scope.row.experimentRequiredDate)}}%
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="expermentType" label="实验状态" align="center" width="100">
          <template #default="scope">
            <div v-if="scope.row.experimentEndDate!=null" style="background-color: #0a8805;color: white;border-radius: 30%;font-size: 12px">
              已完成
            </div>
            <div v-else style="background-color: #dc1717;color: white;border-radius: 30%;font-size: 12px">
              未完成
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import VChart from 'vue-echarts';
import useHomeStore from "@/store/modules/home.js";
import {getHT, getJT, getJtList} from "@/api/home/home.js";
import {ref} from "vue";
import {listExperimentDetails} from "@/api/project/handle.js";
import {parseTime} from "@/utils/ruoyi.js";

const chart=ref(null);
const optionBar = ref(null);
const currYear = new Date().getFullYear();
let tdate=new Date().setFullYear(currYear-2);
const selectYears=ref([new Date(tdate), new Date()]);
let years = [currYear - 2,currYear - 1,currYear];
let jt0 = [];
let jt1 = [];


const handleYears=(years)=>{
  let res=[]
  for(let y of years){
    res.push(y+'年');
  }
  return res;
}
const handleClick=(param)=>{
  let y=param.value.substring(0,param.value.length-1);
  console.log(y);
  queryParam.value.year=y;
  getList();
  openDia.value=true;
}
const handleQuery=()=>{
  let startYear = selectYears.value[0].getFullYear();
  let endYear = selectYears.value[1].getFullYear();
  getJT(startYear,endYear).then(res=>{
    years=[]
    let tmap = res.data;
    jt0=[]
    jt1=[]
    for (let i = startYear; i <= endYear; i++) {
      years.push(i);
      jt0.push(tmap[i]==null?0:tmap[i]['JT0']==null ? 0 : tmap[i]['JT0']);
      jt1.push(tmap[i]==null?0:tmap[i]['JT1']==null ? 0 : tmap[i]['JT1']);
    }
    chart.value.setOption(option());
  })
}

const labelOption = {
  show: true,
  position: 'top',
  distance: '15',
  align: 'center',
  verticalAlign: 'top',
  rotate: '0',
  formatter: '{name|{a}}: {c}',
  fontSize: 16,
  rich: {
    name: {}
  }
};

const option =()=>{
  return{
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['未结题', '已结题']
  },
    color:[
      '#4cdd2d','#e12f2f'
    ],
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: handleYears(years),
      triggerEvent: true,
      axisLabel:{
        textStyle:{
          fontSize: '20px'
        }
      }
    },
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '未结题',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: jt0
    },
    {
      name: '已结题',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: jt1
    }
  ]
}};

//
const openDia=ref(false);
const loading = ref(false);
const queryParam=ref({pageNum:1,pageSize:10,finish:false});
const total=ref(0);
const activeFinish = ref('first');
const jtList=ref([])
const openDia2=ref(false);
const jt2List=ref([]);

function toExperiment(id) {
  listExperimentDetails({pageNum:1,pageSize:999,projectId:id}).then(res => {
    jt2List.value = res.rows;
    openDia2.value=true;
  });
}

function handleFinishClick(tab) {
  if (tab.props.name == 'second') {
    queryParam.value.finish = true;
  } else {
    queryParam.value.finish = false;
  }
  getList();
}
function getList(){
  loading.value=true;
  getJtList(queryParam.value).then(response => {
    jtList.value=response.rows;
    total.value=response.total;
    loading.value=false;
  })
}
function getJD(startDate,endDate){
  let st = Date.parse(startDate)-28800000;
  let en = Date.parse(endDate)-28800000;
  let curr = Date.now();
  let t=(curr-st)/(en-st)*100;
  return parseInt(t);
}

handleQuery();
</script>

<style scoped lang="scss">

</style>
